<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle3',
  })

  const props = defineProps({
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    title: {
      type: String,
      default: () => '这是标题',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      color: props.titleColor,
    }
  })

  const dividerStyle = computed<CSSProperties>(() => {
    return {
      'border-bottom': `1px solid ${props.dividerColor}`,
    }
  })
</script>

<template>
  <div class="custom-title3">
    <div class="title" :style="titleStyle">{{ props.title }}</div>
    <div class="divider" :style="dividerStyle"></div>
    <div v-if="props.desc" class="desc">{{ props.desc }}</div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title3 {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    width: 100%;
  }
</style>
